import RequestMessage from "./requestMessage/RequestMessage";

import classes from "./RequestBody.module.scss";
import { useEffect, useRef } from "react";
import { Button } from "@mui/material";

const RequestBody = ({ data = [] }) => {
  const ref = useRef();
  const scrollToBottom = () => {
    const lastChildElement = ref.current?.lastElementChild;
    lastChildElement?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    if (ref.current?.lastElementChild) {
      scrollToBottom();
    }
  }, [ref.current?.lastElementChild]);

  return (
    <div className={classes["request-body"]} ref={ref}>
      {data.map((item, idx) => (
        <RequestMessage key={idx} data={item} index={idx} />
      ))}
    </div>
  );
};

export default RequestBody;